<template>
  <div class="content">
    <div style="boxs">
      <!-- <Header :params="params" /> -->
      <div class="list">
        <!-- 更换头像 -->
        <van-uploader :before-read="beforeRead" :after-read="afterRead">
          <div class="listCon">
            <!-- 自定义上传样式 -->
            <div class="listCon_l">
              <span>更换头像</span>
            </div>
            <div class="listCon_r">
              <img :src="userHead" alt="">
              <img src="/img/circle/next.png" alt="">
            </div>
          </div>
        </van-uploader>
        <!-- 个性签名 -->
        <div class="listCon" @click="toSignature">
          <div class="listCon_l">
            <span>个性签名</span>
          </div>
          <div class="listCon_r">
            <!-- <img src="/img/userInfo/userInfo.png" alt=""> -->
            <img src="/img/circle/next.png" alt="">
          </div>
        </div>
        <!-- 部门/校区 -->
        <div class="listCon">
          <div class="listCon_l">
            <span>部门/校区</span>
          </div>
          <div class="listCon_r gray">
            {{userDep}}
          </div>
        </div>
        <!-- 职位 -->
        <div class="listCon listConCan">
          <div class="listCon_l">
            <span>职位</span>
          </div>
          <div class="listCon_r gray">
            {{userJob}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      params: {
        left: true,
        title: "个人中心",
      },
      fileList: "/img/userInfo/userInfo.png",
      userJob: "",
      userDep: "",
      userHead: "",
      formData: "",
      userGexing: ""
    };
  },
  mounted() {
    this.userDep = this.$route.query.userDep;
    this.userJob = this.$route.query.userJob;
    this.userHead = this.$route.query.userHead;
    this.userGexing = this.$route.query.userGexing;
  },
  methods: {
    beforeRead(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$toast("请上传 jpg/png 格式图片");
        return false;
      }
      return true;
    },
    afterRead(file) {
      this.formData = new FormData();
      this.formData.append("file", file.file);
      this.formData.append("userId", localStorage.getItem("id"));
      (async () => {
        const data = await this.post("/user/updateUserHead", this.formData);
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.$router.back();
        } else {
          this.$toast.fail(data.msg);
        }
      })();
    },
    toSignature() {
      this.$router.push({
        path: "/Signature",
        query: {
          userGexing: this.userGexing
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  background-color: #f7f9fa;
  border-top: 1px #f7f9fa solid;
  box-sizing: border-box;
  .boxs {
    width: 100%;
  }
}
.list {
  width: 7.5rem;
  background: #ffffff;
  padding: 0 0.24rem;
  box-sizing: border-box;
  .van-uploader {
    display: block;
  }
  .listCon {
    width: 7.02rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #e7e7e7;
    .listCon_l {
      font-size: 0.3rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .listCon_r {
      display: flex;
      align-items: center;
    }
    .gray {
      font-size: 0.26rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ccc;
    }
    .listCon_r img:first-child {
      width: 0.58rem;
      height: 0.58rem;
      border-radius: 50%;
    }
    .listCon_r img:last-child {
      width: 0.14rem;
      height: 0.26rem;
      margin-left: 0.2rem;
    }
  }
  .listConCan {
    border: 0;
  }
}
</style>